<template>
  <v-container fluid class="record-wrapper">
    <v-layout row wrap justify-center>
      <v-flex md8>
        <div>{{showText}}</div>
        <v-flex md12 class="mt-2">
          <v-layout>
            <v-flex class="text-xs-left">
            <h1>公众号管理</h1>
          </v-flex>
          <v-flex class="text-xs-right">
            <v-btn dark color="blue" @click="openDialog(3)">
              <v-icon>add</v-icon>
              <span class="subheading">新增公众号</span>
            </v-btn>
          </v-flex>
          </v-layout>
          
          <v-data-table :headers="areaHeaders" :items="areaData" hide-actions class="elevation-1">
          <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
            <template slot="items" slot-scope="props">
              <td class="text-xs-center subheading" width="30%">{{ props.item.areaName }}</td>
              <td class="text-xs-center subheading" width="30%">{{ props.item.areaCode }}</td>
              <td class="text-xs-center"  width="40%">
                <v-btn flat round dark color="green" class="mx-1" @click="editAr(props.item)">
                  <span class="mx-1">编辑</span>
                  <v-icon color="green">edit</v-icon>
                </v-btn>
                <v-btn flat round dark color="red" class="mx-1" @click="delAr(props.item)">
                  <span class="mx-1">删除</span>
                  <v-icon color="red">delete_forever</v-icon>
                </v-btn>
              </td>
            </template>
            <!-- 没有数据时显示的提示 -->
            <template slot="no-data">
              <div class="text-xs-center">
                <v-icon color="yellow darken-3">warning</v-icon>
                <span class="subheading">暂无数据</span>
              </div>
            </template>
          </v-data-table>
           <div class="text-xs-center my-2">
              <v-pagination @input="apageChange" circle :length="apagination.pageCount" :total-visible="apagination.totalVisible" v-model="apagination.page"></v-pagination>
            </div>
        </v-flex>
        <v-flex md12 class="mt-2">
          <v-layout>
          <v-flex class="text-xs-left">
            <h1>部门管理</h1>
          </v-flex>
          <v-flex class="text-xs-right">
            <v-btn dark color="blue" @click="openDialog(1)">
              <v-icon>add</v-icon>
              <span class="subheading">新增部门</span>
            </v-btn>
          </v-flex>
        </v-layout>
          <v-data-table :headers="dpHeaders" :items="dpData" hide-actions class="elevation-1">
          <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
            <template slot="items" slot-scope="props">
              <td class="text-xs-center subheading" width="50%">{{ props.item.departmentName }}</td>
              <td class="text-xs-center"  width="50%">
                <v-btn flat round dark color="green" class="mx-1" @click="editDp(props.item)">
                  <span class="mx-1">编辑</span>
                  <v-icon color="green">edit</v-icon>
                </v-btn>
                <v-btn flat round dark color="red" class="mx-1" @click="delDp(props.item)">
                  <span class="mx-1">删除</span>
                  <v-icon color="red">delete_forever</v-icon>
                </v-btn>
              </td>
            </template>
            <!-- 没有数据时显示的提示 -->
            <template slot="no-data">
              <div class="text-xs-center">
                <v-icon color="yellow darken-3">warning</v-icon>
                <span class="subheading">暂无数据</span>
              </div>
            </template>
          </v-data-table>
           <div class="text-xs-center my-2">
              <v-pagination @input="dpageChange" circle :length="dpagination.pageCount" :total-visible="dpagination.totalVisible" v-model="dpagination.page"></v-pagination>
            </div>
        </v-flex>

        <v-flex md12 class="mt-2">
          <v-layout>
          <v-flex class="text-xs-left">
            <h1>项目管理</h1>
          </v-flex>
          <v-flex class="text-xs-right">
            <v-btn dark color="blue" @click="openDialog(2)">
              <v-icon>add</v-icon>
              <span class="subheading">新增项目</span>
            </v-btn>
          </v-flex>
        </v-layout>
          <v-data-table :loading="false" :headers="projHeaders" :items="projData" hide-actions class="elevation-1">
          <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
            <template slot="items" slot-scope="props">
              <td class="text-xs-center subheading" width="20%">{{ props.item.projectName }}</td>
              <td class="text-xs-center subheading" width="20%">{{ props.item.type | TypeFilter  }}</td>
              <td class="text-xs-center subheading" width="20%">{{ props.item.area.areaName }}</td>
              <td class="text-xs-center"  width="40%">
                <v-btn flat round dark color="green" class="mx-1" @click="editProj(props.item)">
                  <span class="mx-1">编辑</span>
                  <v-icon color="green">edit</v-icon>
                </v-btn>
                <v-btn flat round dark color="red" class="mx-1" @click="delProj(props.item)">
                  <span class="mx-1">删除</span>
                  <v-icon color="red">delete_forever</v-icon>
                </v-btn>
              </td>
            </template>
            <template slot="no-data">
              <div class="text-xs-center">
                <v-icon color="yellow darken-3">warning</v-icon>
                <span class="subheading">暂无数据</span>
              </div>
            </template>
          </v-data-table>
           <div class="text-xs-center my-2">
              <v-pagination @input="ppageChange" circle :length="ppagination.pageCount" :total-visible="ppagination.totalVisible" v-model="ppagination.page"></v-pagination>
            </div>
        </v-flex>
      </v-flex>

    </v-layout>


    <v-dialog v-model="dialog" max-width="340px">
      <v-card>
        <v-card-title class="headline">{{dialogTitle}}</v-card-title>
        <v-divider></v-divider>
        <v-card-text class="title">
          <v-layout row wrap justify-center v-if="dialogType === 1">
            <v-flex md10 xs11>
              <v-text-field name="department" label="部门名称" v-model="dpItem.departmentName" single-line></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row wrap justify-center v-else-if="dialogType === 2">
            <v-flex md10 xs11>
              <v-text-field name="projectName"  label="项目名称" v-model="projItem.projectName" single-line></v-text-field>
            </v-flex>
            <v-flex md10 xs11>
              <v-select :items="projTypes" v-model="projItem.type" label="分类"></v-select>
            </v-flex>
            <v-flex md10 xs11>
              <v-select :items="areaItems" v-model="projItem.areaId" label="所属公众号"></v-select>
            </v-flex>
          </v-layout>
          <v-layout row wrap justify-center v-else-if="dialogType === 3">
            <v-flex md10 xs11>
              <v-text-field name="areaName"  label="公众号名称" v-model="areaItem.areaName" single-line></v-text-field>
            </v-flex>
             <v-flex md10 xs11>
              <v-text-field name="areaCode"  label="areaCode" v-model="areaItem.areaCode" single-line></v-text-field>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmDialog">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" max-width="290">
      <v-card>
        <v-card-title class="headline">注意！</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as system from "../../api/system";
import { getTime } from '../../util';
let PROJECT = {};
let projTypesItems = {
      '0': '无',
      '1': '客户端',
      '2': '服务端',
    }
export default {
  data: () => ({
    showProgress: false,
    dialog: false,
    dialogType: 1,
    modal: false,
    modalText: "",
    showText: "",
    date: "",
    dialogTitle: "新增部门",
    dpItem: {},
    projItem: {},
    areaItem: {},
    areaData: [],
    projTypes: [
      {
        value: 0,
        text: '无'
      },
      {
        value: 1,
        text: '客户端'
      },
      {
        value: 2,
        text: '服务端'
      },
    ],
    areaItems: [{
        value: 0,
        text: '无'
    }],
    projTypesItems: {
      '0': '无',
      '1': '客户端',
      '2': '服务端',
    },
    dpData: [],
    projData: [],
    dpHeaders: [
      {
        text: "部门名称",
        value: "projName",
        align: "center",
        sortable: false
      },
      {
        text: "操作",
        value: "actions",
        align: "center",
        sortable: false
      },
    ],
    projHeaders:[
      {
        text: "项目名称",
        value: "dpName",
        align: "center",
        sortable: false
      },
      {
        text: "分类",
        value: "projectName",
        align: "center",
        sortable: false
      },
      {
        text: "所属公众号",
        value: "areaName",
        align: "center",
        sortable: false
      },
      {
        text: "操作",
        value: "actions",
        align: "center",
        sortable: false
      },
    ],
    areaHeaders:[
      {
        text: "公众号名称",
        value: "dpName",
        align: "center",
        sortable: false
      },
      {
        text: "areaCode",
        value: "projectName",
        align: "center",
        sortable: false
      },
      {
        text: "操作",
        value: "actions",
        align: "center",
        sortable: false
      },
    ],
    dayData: {},
    projectList: {},
    doffset: 0,
    dlimit: 5,
    poffset: 0,
    plimit: 5,
    aoffset: 0,
    alimit: 5,
    dpagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    ppagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    apagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
  }),
  mounted() {
    // this.type =  this.$route.query.type
    // this.initialize();
    this.getProjectList();
    this.getDepartmentList()
    this.getAreaList()
    // this.getProjectType();
    // this.showText = window.screen.availHeight
    $Vue.$off('areaCodeChange')
    $Vue.$on('areaCodeChange', ()=>{
      this.getProjectList();
      this.getDepartmentList()
      this.getAreaList()
    })
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  filters: {
     ProjName: function(val) {
      return PROJECT[val]
    },
    TypeFilter : function(val) {

      return projTypesItems[val]
    },
  },
  methods: {
    getTime,
    initialize() {
      this.dpData = [
        {
          departmentName: "技术部",
        },
        {
          departmentName: "设计部",
        }
      ];

      this.projData = [
        {
          projectName: "长沙麻将",
          TypeFilter: 1,
        },
        {
          projectName: "经典斗牛",
          TypeFilter: 2,
        }
      ];
      
    },
     getProjectType() {
      system.getProjectType.r().then(({ data }) => {
        let d = data.data;
        console.log(d)
        if (data.result == 0) {
          // this.projData = d.dataList
        }
      });
    },
     getProjectList() {
      let opt = {
         offset: this.poffset,
         limit: this.plimit
       }
       console.log(opt)
      system.getProjectList.r(opt).then(({ data }) => {
        let d = data.data;
        console.log(d)
        if (data.result == 0) {
          this.projData = d.dataList;
          this.ppagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.plimit)
            : 1;
        }
      });
    },
    getDepartmentList() {
      let opt = {
         offset: this.doffset,
         limit: this.dlimit
       }
      system.getDepartmentList.r(opt).then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          this.dpData = d.dataList
          this.dpagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.dlimit)
            : 1;
        }
      });
    },
    getAreaList() {
      let opt = {
         offset: this.aoffset,
         limit: this.alimit
       }
      system.getAreaList.r(opt).then(({ data }) => {
        let d = data.data;
        console.log(d)
        if (data.result == 0) {
          this.areaData = d.dataList;
          this.areaItems = []
          _.forEach(d.dataList, item=>{
            this.areaItems.push({
              text: item.areaName,
              value: item.id
            })
          })
          this.apagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.alimit)
            : 1;
        }
      });
    },
    addDepartment() {
      let opt = {
         departmentName: this.dpItem.departmentName
       }
      system.addDepartment.r(opt).then(({ data }) => {
        let d = data.data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.dialog =  false
        if (data.result == 0) {
          this.getDepartmentList()
        }
      });
    },
    addProject() {
      let opt = {
         projectName: this.projItem.projectName,
         type: this.projItem.type,
         areaId: this.projItem.areaId
       }
      system.addProject.r(opt).then(({ data }) => {
        let d = data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.dialog =  false
        if (data.result == 0) {
          // this.dpData = d.dataList
          this.getProjectList()
        }
      });
    },
    addArea() {
      let opt = {
         areaName: this.areaItem.areaName,
         areaCode: this.areaItem.areaCode
       }
      system.addArea.r(opt).then(({ data }) => {
        let d = data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.dialog =  false
        if (data.result == 0) {
          this.getAreaList()
          $Vue.$emit('areaCodeModify')
        }
      });

    },
    editDepartment() {
      let opt = {
        id: this.dpItem.id,
         departmentName: this.dpItem.departmentName
       }
      system.editDepartment.r(opt).then(({ data }) => {
        let d = data.data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.dialog =  false
        if (data.result == 0) {
          this.getDepartmentList()
        }
      });
    },
    editProject() {
      let opt = {
        id: this.projItem.id,
         projectName: this.projItem.projectName,
         type: this.projItem.type
       }
      system.editProject.r(opt).then(({ data }) => {
        let d = data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.dialog =  false
        if (data.result == 0) {
          // this.dpData = d.dataList
          this.getProjectList()
        }
      });
    },
    editArea() {
      let opt = {
        id: this.areaItem.id,
         areaName: this.areaItem.areaName,
         areaCode: this.areaItem.areaCode
       }
      system.editArea.r(opt).then(({ data }) => {
        let d = data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.dialog =  false
        if (data.result == 0) {
          this.getAreaList()
          $Vue.$emit('areaCodeModify')
        }
      });
    },
    delDepartment() {
      let opt = {
         id: this.dpItem.id,
       }
      system.delDepartment.r(opt).then(({ data }) => {
        let d = data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.modal =  false
        if (data.result == 0) {
          this.getDepartmentList()
        }
      });
    },
    delProject() {
      let opt = {
         id: this.projItem.id,
       }
      system.delProject.r(opt).then(({ data }) => {
        let d = data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.modal =  false
        if (data.result == 0) {
          this.getProjectList()
        }
      });
    },
    delArea() {
      let opt = {
         id: this.areaItem.id,
       }
      system.delArea.r(opt).then(({ data }) => {
        let d = data;
        console.log(data)
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.modal =  false
        if (data.result == 0) {
          this.getAreaList()
          $Vue.$emit('areaCodeModify')
        }
      });
    },
    editDp(item) {
      this.dpItem = item;
      this.dialog = true;
      this.dialogType = 1;
      this.dialogTitle = '编辑部门'
    },
    editProj(item) {
      this.projItem = item;
      this.dialog = true;
      this.dialogType = 2;
      this.dialogTitle = '编辑项目'
    },
    editAr(item) {
      this.areaItem = item;
      this.dialog = true;
      this.dialogType = 3;
      this.dialogTitle = '编辑公众号'
    },
    delDp(item) {
      this.modal = true
      this.dpItem = item
      this.modalText = '确认删除该部门吗？'
    },
    delProj(item) {
      this.modal = true
      this.projItem = item
      this.modalText = '确认删除该项目吗？'
    },
    delAr(item) {
      this.modal = true
      this.areaItem = item
      this.modalText = '确认删除该公众号吗？'
    },
    confirmModal() {
      if(this.modalText === '确认删除该部门吗？')
      {
        this.delDepartment()
      }else if(this.modalText === '确认删除该项目吗？'){
        this.delProject()
      } else {
        this.delArea()

      }
    },
    confirmDialog() {
      if(this.dialogType === 1) {

        if(this.dialogTitle == '编辑部门'){
          this.editDepartment()
        }else {
        this.addDepartment()
        }
      } else if(this.dialogType === 2){
        if(this.dialogTitle == '编辑项目'){
          this.editProject()
        }else {
          this.addProject()
        }
      } else {
        if(this.dialogTitle == '编辑公众号'){
          this.editArea()
        }else {
          this.addArea()
        }
      }
    },
    openDialog(type) {
      if(type === 1) {
        this.dpItem = {}
        this.dialogTitle = '新增部门'
      } else if(type === 2){
        this.projItem = {}
        this.dialogTitle = '新增项目'
      } else if(type === 3) {
        this.areaItem = {}
        this.dialogTitle = '新增公众号'
      }
      this.dialog = true
      this.dialogType = type
    },
    ppageChange(page) {
      this.poffset = (page - 1) * this.plimit;
      this.getProjectList()
    },
    dpageChange(page) {
      this.doffset = (page - 1) * this.dlimit;
      this.getDepartmentList()
    },
    apageChange(page) {
      this.aoffset = (page - 1) * this.alimit;
      this.getAreaList()
    },
  }
};
</script>

<style lang="less" scoped>
</style>


